<template>
	<view class="m5 p10">
		<u-form v-model="formData" label-position="left" label-align="left">
			<u-form-item label="姓名:" prop="formData.name" borderBottom>
				<u--input v-model="formData.name" border="none"></u--input>
			</u-form-item>
			<u-form-item label="电话:" prop="formData.mobile" borderBottom>
				<u--input type="number" v-model="formData.mobile" border="none"></u--input>
			</u-form-item>
			<u-form-item label="城市:" borderBottom>
				<u-text :text="cityinfo.name" border="none" @click="visible=true"></u-text>
			</u-form-item>
			<u-form-item label="详细:">
				<u-input v-model="formData.detail" placeholder="具体门牌"	border="bottom"></u-input>
			</u-form-item>
			<u-form-item label="标签:" prop="formData.tag" borderBottom>
				<view style="display: flex;">
					<view class="tag-item"><u-tag text="无" :plain="formData.tag!='无'" @click="formData.tag='无'"></u-tag>
					</view>
					<view class="tag-item"><u-tag text="家" :plain="formData.tag!='家'" @click="formData.tag='家'"></u-tag>
					</view>
					<view class="tag-item"><u-tag text="公司" :plain="formData.tag!='公司'"
							@click="formData.tag='公司'"></u-tag></view>
				</view>
			</u-form-item>

			<u-form-item>
				<u-button type="primary"  @click="visible=true">保存地址</u-button>
			</u-form-item>
		</u-form>
		<cityPicker column="3" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm"
			@cancel="cancel" :visible="visible" />
		<view>{{str}}</view>
	</view>
</template>

<script>
	import cityPicker from "@/components/citypicker/citypiker.vue"
	export default {
		components: {
			cityPicker
		},
		data() {
			return {
				cityinfo:{
					code:'130284',
					name:"河北省唐山市滦州市",
					province:"河北省",
					city:"唐山市",
					area:"滦州市"
				},
				visible: false,
				maskCloseAble: true,
				str: '',
				defaultValue: '130284',
				formData: {
					addrid: 1,
					name: '刘大大',
					mobile: '18667766666',
					province:'河北省',
					city:"唐山市",
					area:"滦州市",
					detail:"滦州一号",
					address: '山东省济南市历城区龙回1区12号楼西单元302',
					tag: '家',
					default: false,
				}
			}
		},
		onLoad() {
			console.log(uni.getStorageSync("address"));
			uni.removeStorageSync("address");
		},
		methods: {
			confirm(val) {
				this.cityinfo=val;
				console.log(val)
				this.str = JSON.stringify(val)
				this.visible = false
			},
			cancel(){
				this.visible = false
			}
		}
	}
</script>

<style>
	page{
		background-color: #fff;
	}
	.tag-item {
		margin-right: 5px;
	}
</style>